<template>
	<view class="">
		<view class="" v-for="(item,i) of tabs ">
			<view class="left">
				<ul>
					<li @click="select(i)" :class="i == index ? 'li1' : ''">
						<span>{{ item._id }}</span>
					</li>
				</ul>
			</view>
			<view class="right" v-show="index == i">
				<uni-collapse ref="collapse" v-model="value" @change="change" open>
					<uni-collapse-item title="巡检项目">
						<view class="content">
							<p style="color: #cfccd5;padding: 20rpx;">
								<span style="color: red;">注：</span>
								设备合格的打√，不合格的打×
							</p>
							<div>
								<tr>
									<td>设备名称</td>
									<td>合格</td>
									<td>不合格</td>
								</tr>
								<tr v-for="(item2, i2) of item.children">
									<td>{{ item2.equipment_name }}</td>
									<td @click="check(i2)">
										<div v-show="!item2.qualified"
											style="border-radius: 50%; width: 30rpx;height: 30rpx;background-color: #e5e5e5;">
										</div>
										<div v-show="item2.qualified"
											style="border-radius: 50%; width: 30rpx;line-height: 30rpx;background-color: #00c12a;text-align: center;color: #fff;">
											√
										</div>
									</td>
									<td @click="check(i2)">
										<div v-show="item2.qualified"
											style="border-radius: 50%; width: 30rpx;height: 30rpx;background-color: #e5e5e5;">
										</div>
										<div v-show="!item2.qualified"
											style="border-radius: 50%; width: 30rpx;line-height: 30rpx;background-color: #00c12a;text-align: center;color: #fff;">
											√
										</div>
									</td>
								</tr>
							</div>
						</view>
					</uni-collapse-item>
				</uni-collapse>
			</view>
		</view>
	</view>
	<button class="button" type="primary" @click="commit">提交</button>
</template>

<script setup>
	import {
		request
	} from '../../../unit/request.js'
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		onLoad
	} from "@dcloudio/uni-app"
	const value = ref(["0"]);
	const index = ref(0);
	const list = ref([])
	const id = ref("")
	const select = i => {
		index.value = i;
	};
	const check = i => {
		tabs.value[index.value].children[i].qualified = !tabs.value[index.value].children[i].qualified;
		if(list.value.length){
			let a = 1
			list.value.forEach((item,num)=>{
				if(tabs.value[index.value].children[i]._id==item._id){
					list.value[num] = tabs.value[index.value].children[i]
					a = 0
				}
			})
			if(a){
				list.value.push(tabs.value[index.value].children[i])
			}
		}else{
			list.value.push(tabs.value[index.value].children[i])
		}
		console.log(list.value)
	};
	const change = e => {
		console.log(e);
	};
	const tabs = ref([]);
	const getdata = async (id) => {
		console.log(id)
		let res = await request({
			url: `http://42.192.15.126:3000/wang/queck?id=${id}`,
		})
		tabs.value = res.data
	}
	onLoad((a) => {
		id.value = a.id
		getdata(a.id)
	})
	const commit =async()=>{
		let res = await request({
			url: `http://42.192.15.126:3000/wang/commit`,
			data:list.value,
			method:"POST"
		})
		if(res.code){
			uni.navigateTo({
				url:`/pages/patrol-management/patrol-processing/patrol-processing?index=4`
			})
		}
	}
</script>

<style scoped lang="scss">
	.left {
		ul {
			left: 0;
			padding: 0;
			width: 150rpx;

			li {
				list-style: none;
				line-height: 20rpx;
				background-color: #f2f2f2;
				padding: 40rpx;
			}

			.li1 {
				list-style: none;
				line-height: 20rpx;
				color: #4a73ff;
				background-color: #fff;
				padding: 40rpx;
			}
		}
	}

	.right {
		width: calc(100vw - 190rpx);
		position: absolute;
		top: 0;
		left: 190rpx;

		tr {
			margin: 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			td {
				flex: 1;
				margin: auto;
			}
		}
	}
	.button{
		position: relative;
		margin-top: 150%;
		width: 30%;
	}
</style>
